import { Input, Button, Icon, Form } from 'antd';
import styles from './index.less';
import CountDown from 'ant-design-pro/lib/CountDown';
import logo from '@/assets/global/logo.png'
import { connect } from 'dva'

@connect(({ loading, user, sms, smsSetting}) => ({
  loginLoading: loading.effects['user/fetchLogin'], 
  loginIsOk: user.loginIsOk,
  sendSmsKey: user.sendSmsKey,
  errMsg: user.errMsg,
  sendSmsTelNum: sms.sendSmsTelNum,
  isSmsCheck: smsSetting.isSmsCheck
}))
class Login extends React.Component {

  state = {
    targetTime: false,
    code: ''
  }

  handleSubmit = ()=>{
    console.log("submit")
    this.props.form.validateFields(
      (err) => {
        if (!err) {
          const { code } = this.state
          const { dispatch, isSmsCheck, loginIsOk, sendSmsTelNum, form:{ getFieldsValue } } = this.props
          const { username, password} = getFieldsValue()
          console.log(loginIsOk)
          if(isSmsCheck && !loginIsOk){
            console.log("验证用户名密码")
            dispatch({
              type: 'user/fetchCheckUsernamePassword',
              payload: {
                username: username,
                password: password,
              }
            })
          }else{
            console.log("登录")
            let key = username
            let val = password
            if(isSmsCheck){
              key = sendSmsTelNum
              val = code
            }
            dispatch({
              type: 'user/fetchLogin',
              payload: {
                auth_type: isSmsCheck? 'sms': null,
                username: key,
                password: val,
              }
            })
          }
        }
      },
    );
  }

  render() {
    const {
      isSmsCheck,
      loginIsOk,
      sendSmsKey,
      dispatch,
      errMsg,
      form: { getFieldDecorator, getFieldsValue },
    } = this.props
    const {
      targetTime,
      code
    } = this.state
    console.log(isSmsCheck, loginIsOk, !isSmsCheck && !loginIsOk)
    return (
        <Form className = {styles.login} >
          <div className = {styles.title}>
            <img className = {styles.logo}
              src = {logo} />
            <span className = {styles.name}>xx短信平台</span>
          </div>
          <div className = {styles.errMsg}>{errMsg ? errMsg : ''}</div>
          <Form.Item>
            {getFieldDecorator('username', {
              rules: [{
                required: true, message: '请输入账号',
              }],
            })(
              <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder={'账号'} className={styles.username}/>
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator('password', {
              rules: [{
                required: true, message: '请输密码',
              }],
            })(
              <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="密码" type="password"  className={styles.password}/>
              )}
          </Form.Item>
          {(isSmsCheck && loginIsOk)?
            <div className={styles.telCode}>
              <Input placeholder="验证码" className={styles.codeInp} 
                value = {code}
                onChange = {(e)=>{
                this.setState({
                  code: e.target.value
                })
              }}/>
              <Button type="primary" className={styles.codeBtn} disabled={targetTime?true:false}
                onClick = {()=>{
                  const targetTime = new Date().getTime() + 60000;
                  this.setState({
                    targetTime: targetTime
                  })
                  console.log(sendSmsKey)
                  dispatch({
                    type: 'sms/fetchLoginSms',
                    payload: {
                      checkKey: sendSmsKey,
                    }
                  })
                }}
              >
              {
              targetTime?
              <CountDown style={{ fontSize: 20 }} 
                format={(time)=>{
                  return Math.ceil(time/1000)
                }}
                target={targetTime} 
                onEnd = {()=>{
                  this.setState({
                    targetTime: false
                  })
                }}
              />
              :
              '获取验证码'
              }
              </Button>
            </div>
          :
            null
          }
          <Button type="primary" className = {styles.loginBtn}
            //htmlType="submit"
            loading ={this.props.loginLoading}
            onClick = {this.handleSubmit}
            >登录</Button>
        </Form>
    )
  }
  
  componentDidMount(){
    const { dispatch } = this.props
    dispatch({
        type: 'smsSetting/fetchSelSmsCheck',
    })
  }
}

const MyForm = Form.create({})(Login);

export default MyForm